﻿@model ETL.Web.Models.ManageTaskViewModel
@{
    ViewBag.Title = "Management Page";
}
<link rel="stylesheet" type="text/css" href="../../Content/webgrid.css" />
<script src="../../Scripts/managetask-events.js" type="text/javascript"></script>
<script src="../../Scripts/managetask-functions.js" type="text/javascript"></script>
<link rel="stylesheet" href="../Content/chosen.css" />
<script src="../../Content/jquery/chosen.jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../Content/themes/base/jquery.ui.timepicker.css" />
<script type="text/javascript">
    $(document).ready(function () {
        $('#inputStartDate').datepicker();
        $('#inputStartTime').timepicker();

        $('#inputEndDate').datepicker();
        $('#inputEndTime').timepicker();
        $('#ddlUsers').chosen();
        $('#ddlLeadEngineers').chosen();
        $('#ddlProject').chosen();
    })
</script>
<style type="text/css">
#txtTaskName {
  display: block;
  width: 95%;
  min-height: 28px;        
  .box-sizing(border-box); 
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}
.enterdate-label
{
    text-align : right;
    font-family : Segoe UI;
    font-size : 12px;
    font-weight : bold;
    
}
.enterdate-span
{
    text-align : left;
    font-family : Segoe UI;
    font-size : 13px;
    font-weight : normal;
    
}
.enterdate-label span
{
    display : block;
    padding : 5px;
}
.enterdate-center
{
    text-align : center;
}

</style>

<div class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      <li>@Html.ActionLink("Manage Actual Resource", "Index", "ManageActualResource", null, null)</li>
      <li class="active">@Html.ActionLink("Manage Tasks", "Index", "ManageTask", null, null)</li>
      <li>@Html.ActionLink("Register New Account", "Register", "Account", null, null)</li>
    </ul>
  </div>
</div>

<div class="row">
    <div class="span1" style="text-align: left;">
        <label>Project</label>
    </div>
    <div class="span11" style="text-align: left;">
        <div class="span6">
            <select id="ddlProject" style="width: 100%;">
                <option value='-1' title='Select a category...'>Select project...</option>
                @if (Model.ProjectModels != null && Model.ProjectModels.Count() > 0)
                {
                    foreach (var project in Model.ProjectModels)
                    {
                    //option selected="@project.Selected" value='@project.ProjectId' title='@project.ProjectDescription'
                    <option selected="@project.Selected" value='@project.ProjectId'>
                        @project.DisplayedName
                    </option>
                    }
                }
            </select>
            </div>
            <div class="span3">
            <select id="ddlLeadEngineers" class="span3">
            <option value='-1'>Select lead engineer...</option>
                    @if (Model.ProjectUserModels != null && Model.ProjectUserModels.Count() > 0)
                    {
                        foreach (var user in Model.ProjectUserModels)
                        {
                            <option value='@user.Id'>@user.FullName</option>
                        }
                    }
            </select>
            </div>
            <div class="span"><a class="btn btn-small btn-primary" id="btnSetLeadEngineer" style="height : 20px">Set Lead Engineer</a></div>
    </div>
</div>

<div class="row">
    <div class="span8">
        <fieldset style="height: 100%;width : 600px">
        <legend>All tasks of</legend>
            <div id="ajaxGridTask"></div>
        </fieldset>
    </div>
    <div id="editTaskDiv" class="span4"></div>
    <div id="newTaskDiv" class="span4">
        <fieldset>
        <legend>Create new task</legend>   
        <div class="row">
            <div class="span4">Task name</div>
            <div class="span4"><input type="text" id="txtTaskName"/></div>
        </div>
        <div class="row">
            <div class="span4">Assign this task to</div>
            <div class="span4">
                <select id="ddlUsers" style="width: 100%;" multiple data-placeholder="Select users...">
                            @if (Model.ProjectUserModels != null && Model.ProjectUserModels.Count() > 0)
                            {
                                foreach (var user in Model.ProjectUserModels)
                                {
                                    <option value='@user.Id'>@user.FullName</option>
                                }
                            }
                    </select>
            </div>
        </div>
        <br />

        <div class="row">
            <div class="span4">Start date</div>
            <div class="span4">
                <input id="inputStartDate" name="inputStartDate" type="text" class="datepicker" size="16"/>
                <input id="inputStartTime" name="inputStartTime" type="text" class="timepicker" size="16"/>
            </div>
        </div>

        <div class="row">
            <div class="span4">End date</div>
            <div class="span4">
                <input id="inputEndDate" name="inputEndDate" type="text" class="datepicker" size="16"/>
                <input id="inputEndTime" name="inputEndTime" type="text" class="timepicker" size="16"/>
            </div>
        </div>
        <div class="row">
            <div class="span2">
            <a class="btn actButtons btn-primary" id="btnAddNewTask">Add Task</a>
            </div>
            <div class="span2" style="margin-left : 5px"><a class="btn actButtons" id="btnClearForm">Clear Form</a></div>
        </div>


        </fieldset>
    </div>

</div>

